<script setup lang="ts">
import { ref } from "vue";
import { Video } from "../index";
import { getAllVideoAPI, getVideoByIDAPI } from "../api/section";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import VideoItem from "../components/video/VideoItem.vue";

const route = useRoute();
const videoID = parseInt(<string>route.params.id);
const videos = ref<Video[]>([]);
const activeVideo = ref<Video | null>(null);
const isLoading = ref(true);

const getData = (id: number) => {
  getAllVideoAPI()
    .then((response) => {
      if (response.status !== 200) {
        isLoading.value = false;
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      isLoading.value = false;
      videos.value = result.data;
    });

  getVideoByIDAPI(id)
    .then((response) => {
      if (response.status !== 200) {
        isLoading.value = false;
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      activeVideo.value = result.data;
    });
};

getData(videoID);

onBeforeRouteUpdate((to) => {
  // console.log(to.params.id, 123, to.meta.isSection, material.value);
  if (to.meta.isVideo) getData(parseInt(<string>to.params.id));
});
</script>

<template>
  <el-row v-loading="isLoading" class="">
    <div
      class="overflow-hidden hover:overflow-visible fixed max-width-side mx-5"
    >
      <el-menu router class="h-full overflow-auto min-w-max">
        <!--        <el-menu-item-->
        <!--          class="text-2xl bg-gray-200"-->
        <!--          style="background-color: #84638e; color: white"-->
        <!--        >-->
        <!--          <template #title>目录</template>-->
        <!--        </el-menu-item>-->
        <el-menu-item
          v-for="video in videos"
          :key="video.id"
          :index="video.id.toString()"
          :route="`${video.id}`"
        >
          <template #title
            >{{ video.title.substring(0, 15)
            }}{{ video.title.length > 15 ? "..." : "" }}
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <el-col :span="4">&nbsp;</el-col>
    <el-col :span="18" class="mx-auto my-2 card bg-white">
      <VideoItem
        :video="activeVideo"
        v-if="activeVideo"
        class="mx-auto text-center"
      />
    </el-col>
  </el-row>
</template>

<style scoped></style>
